<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew
        :title="title"
        :breadCrumb="breadCrumb"
        showBack
      ></pageHeaderNew>
    </template>
    <div class="wrap">
      <main>
        <a-space
          class="table-header"
          style="justify-content: space-between; margin-bottom: 18px"
          fill
        >
          <a-input-search
            v-model="keyword"
            placeholder="请输入关键字"
            @press-enter="tableRef.loadData()"
          />
          <div>
            <a-button
              type="primary"
              @click="
                router.push({
                  name: 'AddAttendanceCycle'
                })
              "
            >
              新增考勤周期
            </a-button>
          </div>
        </a-space>
        <TableTurn :tableData="getTableData" ref="tableRef">
          <a-table-column :width="80">
            <template #title> 序号 </template>
            <template #cell="{ rowIndex }">
              {{ rowIndex + 1 }}
            </template>
          </a-table-column>
          <a-table-column
            align="center"
            :width="200"
            data-index="name"
            title="周期名称"
          >
            <template #cell="{ record }">
              {{ record.name }}
              <a-tag
                v-if="record.isDefault === 1"
                checkable
                color="arcoblue"
                :default-checked="true"
                >默认</a-tag
              >
            </template>
          </a-table-column>
          <a-table-column
            align="center"
            :width="200"
            data-index="name"
            title="考勤周期"
          >
            <template #cell="{ record }">
              <div v-if="record.type === 1">自然月</div>
              <div v-else>
                {{
                  `${mouth[record.startMouth]}${record.startDay}日至${
                    mouth[record.endMouth]
                  }${record.endDay}日`
                }}
              </div>
            </template>
          </a-table-column>
          <!-- <a-table-column
            align="center"
            :width="200"
            data-index="name"
            title="适用范围"
          >
          </a-table-column> -->
          <a-table-column
            align="center"
            :width="200"
            data-index="state"
            title="是否启用"
          >
            <template #cell="{ record }">
              {{ record.state === 1 ? '启用' : '停用' }}
            </template>
          </a-table-column>
          <a-table-column
            align="center"
            :width="200"
            data-index="name"
            title="操作"
          >
            <template #cell="{ record }">
              <a-tooltip content="编辑">
                <IconFont
                  type="icon-edit"
                  :size="26"
                  :style="{
                    marginRight: '10px',
                    cursor: 'pointer'
                  }"
                  @click="edit(record)"
                />
              </a-tooltip>
              <a-tooltip v-if="record.isDefault !== 1" content="设为默认">
                <a-popconfirm
                  content="是否设为默认?"
                  @ok="changeDefault(record)"
                >
                  <icon-settings
                    type="icon-edit"
                    :size="22"
                    :style="{
                      marginRight: '10px',
                      cursor: 'pointer',
                      color: '#4d7ef4'
                    }"
                  />
                </a-popconfirm>
              </a-tooltip>
              <a-tooltip content="删除" position="left">
                <a-popconfirm
                  content="是否确认删除该条数据?"
                  @ok="del(record.id)"
                >
                  <icon-font
                    type="icon-delete"
                    :size="26"
                    :style="{
                      cursor: 'pointer',
                      marginRight: '10px'
                    }"
                  />
                </a-popconfirm>
              </a-tooltip>
            </template>
          </a-table-column>
        </TableTurn>
      </main>
    </div>
  </ContentCard>
</template>
<script setup lang="ts">
import {
  GetAttendanceCycle,
  DelAttendanceCycle,
  PutAttendanceCycle
} from '@/apis/attendance/base-setting/index';
import { cloneDeep } from 'lodash';
import { useRouter } from 'vue-router';
const title = '考勤周期';
const breadCrumb: string[] = ['考勤', '基础设置', '考勤设置', '考勤周期'];
const show = ref(true);
const keyword = ref('');
const tableRef = ref();
const router = useRouter();

const getTableData = async (pageData: any) => {
  try {
    const res = await GetAttendanceCycle({ ...pageData, name: keyword.value });
    return res;
  } catch (error) {
    console.log(error);
    return [];
  }
};
const edit = (data: any) => {
  localStorage.setItem('attendanceCycle', JSON.stringify(data));
  router.push({
    name: 'AddAttendanceCycle'
  });
};
const changeDefault = async (data: any) => {
  const newData = cloneDeep(data);
  newData.isDefault = 1;
  await PutAttendanceCycle(newData);
  tableRef.value.loadData();
};
const del = async (id: number) => {
  try {
    await DelAttendanceCycle({ ids: [id] });
    tableRef.value.loadData();
  } catch (error) {
    console.log(error);
  }
};
const mouth = ['上月', '本月', '次月'];

// https://date.nager.at/api/v3/publicholidays/2023/cn
// https://date.appworlds.cn/year/2023
</script>
<style lang="less" scoped></style>
